import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import storageApi from '../../core/storage/storage';


@Inject('$log', '$rootScope', 'deviceProfileService')
class deviceProfileController {
  /*eslint-disable */
  constructor() {
    this.querySelfDeviceInOutStatistics();
    this.getDeviceClassifyStatistics();
    this.getDeviceUseLocationStatistics();
  }

  querySelfDeviceInOutStatistics() {
    this.hasData1 = false;
    this.deviceProfileService.querySelfDeviceInOutStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
    .then((res) => {
      if (res.success) {
        if(res.rows && res.rows.length > 0) {
          this.hasData1 = true;
          this.initChart1(res.rows);
        }
      }
    });
  }

  getDeviceClassifyStatistics() {
    this.deviceProfileService.getDeviceClassifyStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
    .then((res) => {
      if (res.success) {
        if(res.data && res.data.length > 0) {
          this.hasData2 = true;
          this.initChart2(res.data);
        }
      }
    });
  }

  getDeviceUseLocationStatistics() {
    this.deviceProfileService.getDeviceUseLocationStatistics({orgId: this.$rootScope.orgId || storageApi.get('orgId')})
    .then((res) => {
      if (res.success) {
        if(res.data && res.data.length > 0) {
          this.hasData3 = true;
          this.initChart3(res.data);
        }
      }
    });
  }

  initChart1(data) {
      var enterNums = data.map(item => item.enterNum);
      var leaveNums = data.map(item => item.leaveNum);
      var inNums = data.map(item => item.inNum);
      var colors = ['#59b0e7', '#76c585', '#c4c4c4'];
      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
              data: ['本月进场设备数', '本月离场设备数', '本月在线设备数']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'value'
          },
          xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          series: [{
                  name: '本月进场设备数',
                  type: 'bar',
                  barMaxWidth: '20',
                  stack: '设备数',
                  itemStyle: {
                      normal: {
                          color: colors[0],
                      }
                  },
                  label: {
                      normal: {
                          show: true,
                          position: 'top',
                          textStyle: {
                              color: colors[0],
                          }
                      }
                  },
                  data: enterNums
              }, {
                  name: '本月离场设备数',
                  type: 'bar',
                  stack: '设备数',
                  itemStyle: {
                      normal: {
                          color: colors[1],
                      }
                  },
                  label: {
                      normal: {
                          show: true,
                          position: 'bottom',
                          textStyle: {
                              color: colors[1],
                          }
                      }
                  },
                  data: leaveNums
              }, {
                  name: '本月在线设备数',
                  type: 'line',
                  stack: '设备数',
                  label: {
                      normal: {
                          show: true,
                          position: 'insideRight',
                          textStyle: {
                              color: colors[2],
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: colors[2],
                      }
                  },
                  data: inNums,
              },

          ]
      };
      const myChart1 = echarts.init(document.getElementById('device-in-out-chart'));
      myChart1.setOption(option);
      setTimeout(() => {
        myChart1.resize();
      }, 50);
  }

  initChart2(data) {
    var names = data.map(item => item.name);
    var newData = data.map((item) => {
      return {
        name: item.name,
        value: item.num,
      }
    });
    var colors = ['#7bd1db', '#db9d86', '#ce81cf', '#59b0e7', '#76c585', '#c4c4c4'];
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            x: 'center',
            data: names,
        },
        series: [{
            name: '设备数量',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                color: (data) => {
                  return colors[data.dataIndex];
                },
              }
            },
            label: {
                normal: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: newData
        }]
    };
    const myChart2 = echarts.init(document.getElementById('device-classify-chart'));
    myChart2.setOption(option);
    setTimeout(() => {
      myChart2.resize();
    }, 50);
  }


  initChart3(data) {
      var names = data.map(item => item.name);
      var nums = data.map(item => item.num);
      var colors = ['#188df0'];
      var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: names
        },
        series: [{
            type: 'bar',
            barMaxWidth: '57',
            stack: '数量',
            name: '数量',
            itemStyle: {
                normal: {
                    color: colors[0],
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: colors[0],
                    }
                }
            },
            data: nums
        }]
      };
      const myChart3 = echarts.init(document.getElementById('device-use-chart'));
      myChart3.setOption(option);
      setTimeout(() => {
        myChart3.resize();
      }, 50);
  }

}

export default deviceProfileController;

